<template>
	<view class="my">
		<view class="my_item" v-for="(item,index) in myOrder" @click="linkDetails(item)">
			<view class="my_item_title">
				<text class="title">欢欢餐饮店</text>
				<text class="right">{{item.transac_status === 'success' ? '已完成' : '待结账'}}</text>
			</view>
			<view class="my_item_main">
				<view class="my_item_main_left">
					<div class="my_item_main_info">
						<text>桌台号码：</text>
						<text>{{item.table_number}}</text>
					</div>
					<div class="my_item_main_info">
						<text>下单时间：</text>
						<text>{{item.order_time}}</text>
					</div>
				</view>
				<view class="my_item_main_right">
					￥{{item.sett_amount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// l连接数据库
	const db = wx.cloud.database()
	const good_collect = db.collection('order_data')
	const _ = db.command
	export default {
		data() {
			return {
				myOrder:[]
			}
		},
		onLoad() {
			this.getMyOrder()
		},
		methods: {
			async getMyOrder() {
				try{
					let field_list = {
						transac_status:true,
						table_number:true,
						order_time:true,
						sett_amount:true,
					}
					const res = await good_collect.where({}).orderBy('order_time', 'desc').field(field_list).get()
					this.myOrder = res.data
				}catch(e){
					//TODO handle the exception
				}
			},
			linkDetails(obj) {
				let { transac_status } = obj
				// 页面跳转
				wx.reLaunch({
					url:`/pages/order-detail/details?status=${transac_status}`
				})
			}
			
		}
	}
</script>

<style>
.my {
	height: 100vh;
	padding: 10rpx;
	background-color: rgba(192,192,192,.3);
}
.my_item {
	margin-bottom: 10rpx;
	padding: 0 30rpx;
	background-color: #fff;
}
.my_item_title {
	padding: 20rpx 0;
	display: flex;
	border-bottom: 1rpx solid #ccc;
}
.title {
	font-weight: 600;
	font-size: 36rpx;
	color:#000;
}
.right {
	font-size: 36rpx;
	color:rgba(0,0,0,.7);
	margin-left: auto;
}
.my_item_main {
	padding: 30rpx 0;
	display: flex;
	align-items: center;
}
.my_item_main_left {
	display: flex;
	flex-direction: column;
	gap:20rpx;
}
.my_item_main_right {
	margin-left: auto;
	font-size: 34rpx;
	font-weight: 600;
}
.my_item_main_info {
	font-size: 26rpx;
	color: #ccc;
}
</style>
